@keyframes delaybgcolor {
      0% {background-color: transparent;}
     99% {background-color: transparent;}
    100% {background-color: var(--tab-indicator-background-color-active);}
}

.neo-tab-header-button.neo-button {
    align-self      : end;
    background-color: var(--tab-button-background-color);
    background-image: var(--tab-button-background-image);
    border          : var(--tab-button-border);
    border-bottom   : var(--tab-button-border-bottom);
    border-radius   : var(--tab-button-border-radius);
    height          : var(--tab-button-height);
    margin          : 0 0 var(--tab-button-margin-bottom);
    padding         : var(--tab-button-padding);
    text-transform  : var(--tab-button-text-transform);

    .neo-button-badge {
        font-size     : 10px;
        text-transform: none;
    }

    .neo-button-glyph {
        color: var(--tab-button-glyph-color);
    }

    .neo-button-text {
        color    : var(--tab-button-text-color);
        font-size: var(--tab-button-text-font-size);
    }

    .neo-tab-button-indicator {
        background-color: transparent;
        bottom          : calc(var(--tab-strip-height) * -1);
        height          : var(--tab-strip-height);
        pointer-events  : none;
        position        : absolute;
        width           : 100%;
        z-index         : 2;
    }

    &:active {
        background-color: var(--tab-button-background-color-active) !important;

        .neo-button-glyph {
            color: var(--tab-button-glyph-color-active);
        }
    }

    &:hover {
        background-color: var(--tab-button-background-color-hover);
        background-image: none;

        .neo-button-glyph {
            color: var(--tab-button-glyph-color-hover);
        }
    }

    &.pressed {
        background-image: var(--tab-button-background-image-pressed) !important;
        border          : var(--tab-button-border-pressed);
        border-bottom   : var(--tab-button-border-bottom-pressed);
        cursor          : default;
        height          : var(--tab-button-height-pressed);

        .neo-button-glyph {
            color: var(--tab-button-glyph-color-pressed);
        }

        .neo-tab-button-indicator {
            animation-duration: 260ms;
            animation-name    : delaybgcolor;
            background-color  : var(--tab-indicator-background-color-active);
        }
    }

    &:not(:last-child) {
        margin-right: var(--tab-button-gap);
    }
}

.neo-disabled {
    .neo-tab-header-button.neo-button,
    &.neo-tab-header-button.neo-button {
        background-color: var(--tab-button-background-color-disabled);
    }
}
